<template>
    <div class="register" style="overflow:hidden;-webkit-app-region: drag">
        <div class="bodyBox">
            <div class="boxTop">
                注册账号
                <div class="sign-imgBox">
                    <img src="../../assets/img/login/images/findpasas_03.png" alt="" @click="close" style="-webkit-app-region: no-drag;">
                </div>
            </div>
            <!-- 用户名 -->
            <div class="userinput">
                用户名
                <input type="text" placeholder="请输入您的用户名" v-model="username" class="username" maxlength="11" style="-webkit-app-region: no-drag;">
                <div class="error" v-if='iserror_name'>
                    <img src="../../assets/img/login/images/error_03.png" alt="">
                    <span class="spanone">{{errormsg_name}}</span>
                </div>
            </div>
            <!-- 密码 -->
            <div class="userinput passinput">
                密码
                <input type="password" class="username" placeholder="请输入密码" maxlength="16"  v-model="password" style="-webkit-app-region: no-drag;">
                <div class="error" v-if='iserror_pwd'>
                    <img src="../../assets/img/login/images/error_03.png" alt="">
                    <span class="spanone">{{errormsg_pwd}}</span>
                </div>
            </div>
            <!-- 确认密码 -->
            <div class="userinput queinput">
                确认密码
                <input type="password" class="username" placeholder="请再输入一遍密码" maxlength="16" v-model="pass" style="-webkit-app-region: no-drag;">
                <div class="error" v-if='iserror_repwd'>
                    <img src="../../assets/img/login/images/error_03.png" alt="">
                    <span class="spanone">{{errormsg_repwd}}</span>
                </div>
            </div>
            <!-- 密保问题 -->
            <div class="userinput queinput" >
                密保问题
                <img src="../../assets/img/plan/images/select_06.png" alt="" class="queimg">
                <select v-model="value" class="username selectb" style="-webkit-app-region: no-drag;">
                    <option value="0" disabled selected>请选择保问题</option>
                    <option  v-for="item in options"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id"></option>
                </select>
                <div class="error" v-if='iserror_mb'>
                    <img src="../../assets/img/login/images/error_03.png" alt="">
                    <span class="spanone">{{errormsg_mb}}</span>
                </div>
            </div>
            <!-- 密保答案 -->
            <div class="userinput queinput">
                密保答案
                <input type="text" placeholder="请输入密保问题答案" v-model="ansdata" class="username" @change="showans" style="-webkit-app-region: no-drag;">
                <div class="error" v-if='iserror_anmb'>
                    <img src="../../assets/img/login/images/error_03.png" alt="">
                    <span class="spanone">{{errormsg_anmb}}</span>
                </div>
            </div>
            <!-- 注册 -->
            <div class="nextstep" @click="sign" style="-webkit-app-region: no-drag;">
                注册
            </div>

            <el-row class="signbook">
                    <div style="font-size:12px">
                        <el-checkbox  v-model="checked" style="-webkit-app-region: no-drag;">我已年满18岁 已阅读并接受</el-checkbox>
                        <span  @click="readBook" class="serverBook" style="-webkit-app-region: no-drag;">《服务协议》</span>
                    </div>

                    <div class="error errorcheck" v-if="showwzerror">
                        <img src="../../assets/img/login/images/error_03.png" alt="" >
                        <span class="">是否阅读并接受《服务协议》</span>
                    </div> 

            </el-row>

            <!-- 服务协议 -->
            <div class="readBook" :class="{server:servernone}">
                <div class="sign-imgBox">
                    <img src="../../assets/img/login/images/findpasas_03.png" alt="" @click="closebook" style="-webkit-app-region: no-drag;">
                </div>
                <div v-html="this.serverbook.content">
                    {{this.serverbook.content}}
                </div>
            </div>

        </div>
    </div>
</template>
<script>
if (window.require) {
  var ipc = window.require('electron').ipcRenderer
}
import https from '@/public/https'
import { setTimeout } from 'timers';
export default {
    name:"sign",
    data(){
        return{
            options: [],    
            value: '0',   //密保问题
            checked: true,
            question:"",
            username:"",
            password:"",
            pass:"",
            mbque:"",
            ansdata:"",
            errormsg_name: '',
            iserror_name: false,
            errormsg_pwd: '',
            iserror_pwd: false,
            errormsg_repwd: '',
            iserror_repwd: false,
            errormsg_mb: '',
            iserror_mb: false,
            errormsg_anmb: '',
            iserror_anmb: false,
            showwzerror:false,
            showwzimg:true,
            showwz:true,
            showdaerror:true,
            showerror:true,
            showyzerror:true,
            showpasserror:true,
            showword:true,
            showspan:true,
            showpass:true,
            showimg:true,
            showpicture:true,
            showdaimg:true,
            showda:true,
            showtwopass:true,
            serverbook:{},  //服务协议
            servernone:true
        }
    },
    watch:{
        username:function(){
            this.iserror_name = false
            this.errormsg_name = ''
        },
        password:function(){
            this.iserror_pwd = false
            this.errormsg_pwd = ''
        },
        pass(){
            this.iserror_repwd = false
            this.errormsg_repwd = ''
        },
        value(){
            this.iserror_mb = false
            this.errormsg_mb = ''
        },
        ansdata(){
            this.iserror_anmb = false
            this.errormsg_anmb = ''
        },
        checked(){
            if(this.checked){   
                this.showwzerror=false;
            } else {               
                this.showwzerror=true;
            }           
        }
    },
   
    mounted(){
        // this.getquestion()
    },
    created(){
        this.getquestion()
    },
    methods:{
        getquestion(){
            this.https("common/getObtainUserAnswerList").then(data=>{
                this.options = data;
            })
        },
        userdata:function(){  //验证用户名
            var name=this.username;
            var namelen=name.length;
            if(namelen>11||namelen<2){
                this.showerror=!this.showerror;
                this.showword = !this.showword;
                this.showimg=!this.showimg;
            }else{
                this.showerror=true;
                this.showword=true;
                this.showimg=true;
                var uPattern = /^[a-zA-Z0-9_]{2,11}$/;
                var nameres = uPattern.test(name);
                if(nameres==false){
                    this.showerror=!this.showerror;
                    this.showspan = false;
                    this.showimg=!this.showimg;
                }else{
                    this.showerror=true;
                }
            }
        },
        passdata:function(){ //验证输入密码
                var pass=this.password;
                var passlen=pass.length;
                if(passlen<6||passlen>16){
                    this.showpasserror=!this.showpasserror;
                }else{
                    var pPass1 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
                    var passres = pPass1.test(pass);
                    if(passres==false){
                        this.showpasserror=!this.showpasserror;
                        this.showpass = false;
                        this.showimage=!this.showimage;
                    }else{
                        this.showpasserror=true;
                    }
                }
        },
        passYz:function(){  //验证两次密码是否一致
            if(!(this.password==this.pass)){
                this.showyzerror=!this.showyzerror;
                this.showtwopass = !this.showtwopass;
                this.showpicture=!this.showpicture;
            }else{
                this.showyzerror=true
            }
        },
        showans:function(){  //密保答案
            if(this.ansdata.length>20){
                this.showdaerror=!this.showdaerror;
                this.showdaimg = !this.showdaimg;
                this.showda=!this.showda;
            }else{
                this.showdaerror=true
            }
        },
        sign:function(){  //注册

            var self = this

            if(self.username == ''){
                self.iserror_name = true
                self.errormsg_name = '请输入用户名'
                return
            }

            if(self.username.length>11||self.username.length<2){
               self.iserror_name = true
                self.errormsg_name = '限制输入2-11个字，请重新输入'
                return
            }

            var uPattern = /^[a-zA-Z0-9_]{2,11}$/;
            if(!uPattern.test(self.username)){
                self.iserror_name = true
                self.errormsg_name = '用户名格式不对，请重新输入'
                return
            }

            if(!self.password){
                self.iserror_pwd = true
                self.errormsg_pwd = '请输入密码'
                return
            }

            if(self.password.length<6 || self.password.length>16){
                self.iserror_pwd = true
                self.errormsg_pwd = '注册密码长度必须大于6小于16'
                return
            }

            var yzpwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
            if(!yzpwd.test(self.password)){
                self.iserror_pwd = true
                self.errormsg_pwd = '注册密码必须为6-16位数组和字母的结合'
                return
            }

            if(!self.pass){
                self.iserror_repwd = true
                self.errormsg_repwd = '请再次输入密码'
                return
            }

            if(self.pass !== self.password){
                self.iserror_repwd = true
                self.errormsg_repwd = '两次输入密码不一致，请重新输入'
                return
            }

            if(!self.value){
                self.iserror_mb = true
                self.errormsg_mb = '请选择密保问题'
                return
            }

            if(!self.ansdata){
                self.iserror_anmb = true
                self.errormsg_anmb = '请输入密保问题答案'               
                return
            }

            if(self.ansdata.length>20){
                self.iserror_anmb = true
                self.errormsg_anmb = '答案超出20个字，请重新输入'               
                return
            }
            if(!self.checked){
                self.$toast({
                    message: '请勾选服务协议'
                })
                return
            }

            https.post("common/postUserRegister",{user_name:self.username,password:self.password,repeat_password:self.pass,question_id:self.value,answer:self.ansdata})
                .then(data=>{
                    if(data.status == 1){
                        self.$toast({
                                message: '注册成功'
                            })   
                            
                            setTimeout(function(){
                                ipc.send('signwindow-close');
                            },1500)
                       
                        
                    } else {
                         self.$toast({
                                message: data.message
                            })  
                    }
                });
                   
        },
        readBook(){  //勾选服务协议
            this.servernone=false;
            this.https("common/getObtainServiceAgreement").then(data=>{
                this.serverbook=data;

            })
        },
        //关闭协议页面
        closebook(){
            this.servernone=true;
        },
        close:function(){  //关闭注册页
            ipc.send('signwindow-close');
        }
    }
}
</script>
<style lang="less" scoped>
    @import url(../../assets/css/login/public.less);
    @import url(../../assets/css/login/sign.less);
    .register{
        width: 750px;
        height: 500px;
    }
    .register select{
        outline: none;
        -moz-appearance:none;
        -webkit-appearance:none;
        background: none !important;
    }
    .register select option{
       line-height: 25px;
    }
</style>
<style>
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    margin-top: -2px;
    background-color: #E52A20;
    border-color: #E52A20;
}
.el-checkbox__inner:hover{
    border-color: #E52A20;
}
.el-checkbox__input.is-checked+.el-checkbox__label{
    color:#333333;
}
.el-checkbox__input.is-focus .el-checkbox__inner{
    border-color: #E52A20;
}
.el-checkbox__label{
    font-size:12px;
    color:#333333;
}
.el-checkbox__label span{
    color: #E52A20;
}
.el-input__inner{
    border:none;
}
.el-input{
    font-size: 14px;
}
.el-input__inner{
    color:#999999 !important;
    padding:0;
    height: 34px;
    line-height: 34px;
}
.register .el-select-dropdown{
    left: 170px !important;
    padding-left: 5px;
}
.el-select .el-input .el-select__caret{
    opacity: 0;
}
.register .el-select-dropdown__item{
    font-size: 14px;
    color:#333333;
}
.el-select-dropdown__item.selected{
    color:#333333;
    font-weight: 400;
}
.el-input__prefix, .el-input__suffix{
    z-index: 99;
}
.register select{
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
}
</style>




